<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<title>首页导航</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/jcloud/js/jqcloud-1.0.4.min.js"></script>
<link rel="stylesheet"type="text/css" href="${pageContext.request.contextPath}/page/third/jcloud/css/jqcloud.css"/>
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/third/bootstrap/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/page/style/css/home_nav.css" />
<script type="text/javascript" src="${pageContext.request.contextPath}/page/third/bootstrap/js/bootstrap.min.js"></script>

<style type='text/css'>

</style>
<script type="text/javascript">

$(function() {
	$(document).scroll(function(){
		var window_H = $(window).height();
		// 当屏幕滚出第一屏时，我们让这个按钮出现。
		var h2 = $(document).scrollTop();
		// 判断
		if( h2 >= window_H){
			// 当第一屏即将要滚出去的时候我们要显示返回顶部按钮
			$('.back_top').css('display','block');
		}else{
			$('.back_top').fadeOut(400);
		}
	});
	// 点击图片按钮的时候让我们的页面返回到顶部
	$('.back_top').click(function(){
		$('html,body').animate({'scrollTop':0});
	});	
	$('.back_top').hover(function(){
		$('.back-to-top').hide();
		$('#back_top_font').show();		
	},function(){
		$('.back-to-top').show();
		$('#back_top_font').hide();
	});	

});
</script>
</head>
<body class="nav-fixed" >
		<!--导航条  -->
		<div class="navbar navbar-inverse navbar-fixed-top">
			<nav id="zyn-header" class="navbar navbar-inverse navbar-fixed-top" role="navigation">		
		        <div class="container">
		          <div class="navbar-header">
		            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
		              <span class="sr-only">Toggle navigation</span>
		              <span class="icon-bar"></span>
		              <span class="icon-bar"></span>
		              <span class="icon-bar"></span>
		            </button>
		            <a class="navbar-brand" href="#">Project name</a>
		          </div>
		          <div class="navbar-collapse collapse">
		            <ul class="nav navbar-nav top-navbar-nav">
		              <li class="active"><a href="#" class="toplevel" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
		              <li class="dropdown "><a href="#about" class="dropdown-toggle toplevel"><span class="glyphicon glyphicon-info-sign"></span> 关于我</a></li>
		              <li class="dropdown "><a href="#contact" class="dropdown-toggle"  role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-send"></span> 留言墙</a></li>
		              <li class="dropdown">
		                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span> 更多<b class="caret"></b></a>
		                <ul class="dropdown-menu">
		                  <li><a href="#">Action</a></li>
		                  <li><a href="#">Another action</a></li>
		                  <li><a href="#">Something else here</a></li>
		                  <li class="divider"></li>
		                  <li class="dropdown-header">Nav header</li>
		                  <li><a href="#">Separated link</a></li>
		                  <li><a href="#">One more separated link</a></li>
		                </ul>	                                
		              </li>
		            </ul>
		            
		            <!--搜索框  -->
					<form id="searchform" class="navbar-form navbar-right" role="search" target="_blank" method="get" action="/Search/Index">
		                <div class="form-group">
		                    <input type="text" id="searchWords" name="searchWords" class="form-control" data-provide="typeahead" autocomplete="off" placeholder="请输入要搜索关键词">
		                </div>
                	    <button type="submit" class="btn" id="searchbtn">搜索</button>
            	    </form>		            
		          </div>
		        </div>
			</nav>		        
		  </div> 

</body>

</html>
